<template>
  <div>
    <div style="margin-bottom: 10px;">
      <el-input v-model="pagination.realname" placeholder="通过名字进行查找" style="width: 200px;"
                prefix-icon="el-icon-search"
                @keyup.enter.native="getAll()"></el-input>
      <el-button type="primary" style="margin-left: 5px;" @click="getAll()">查询</el-button>
      <!--      <el-button type="success" style="margin-left: 5px;" @click="reset">重置</el-button>-->
    </div>
    <el-table
        :data="tableData"
        :header-cell-style="{background:'rgb(255,255,255)',color:'#000000'}"
        style="text-align: center"
        border="">
      <el-table-column
          prop="id"
          label="用户编号"
          width="100px"
      >
      </el-table-column>
      <el-table-column
          prop="stunum"
          label="学号"
          width="150px">
      </el-table-column>
      <el-table-column
          prop="realname"
          label="用户姓名"
          width="150px">
      </el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          width="150px">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.tag === '1' ? 'primary' : 'success'"
              disable-transitions>{{ scope.row.gender === 1 ? '男' : '女' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="phone"
          label="用户电话"
          width="150px">
      </el-table-column>
      <el-table-column
          prop="dormnum"
          label="宿舍号"
          width="150px">
      </el-table-column>
      <el-table-column
          prop="tag"
          label="用户标签"
          width="150px">
        <template slot-scope="scope">
          <el-tag
              :type="scope.row.tag === '1' ? 'danger' : 'success'"
              disable-transitions>{{ scope.row.repair === 1 ? '打印商家' : '普通用户' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operate" label="操作" width="">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="update(scope.row)">编辑</el-button>
          <el-popconfirm
              title="确定删除吗？"
              @confirm="remove(scope.row.id)"
              style="margin-left: 5px"
          >
            <el-button slot="reference" size="small" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--    <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page"
            :page-sizes="[10,20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
        </el-pagination>-->

    <el-pagination
        class="pagination"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10,20]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
    </el-pagination>


    <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="id">
          <el-col :span="10">
            <el-input v-model="form.id" disabled="true"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-col :span="10">
            <el-input v-model="form.realname"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="打印商家">
          <el-col :span="10">
            <el-input v-model="form.repair"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="remove">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "user",
  data() {
    return {
      tableData: [],
      pagination: {
        currentPage: 1,//当前页码
        pageSize: 10,//每页显示的记录数
        total: 0,//总记录数
        //以下用于查询
        realname: ''
      },
      /*      total:0,
            page:1,
            size:10,*/
      realname: '',
      centerDialogVisible: false,
      form: {
        id: '',
        realname: '',
        repair: ''
      }
    }
  },
  mounted() {
    this.getAll();
    // this.loadGet();
    // this.loadPost_2();
    // this.initUser();
  },
  methods: {
    /*    async loadGet(){
          this.$axios.get(this.$httpUrls+'/user/all').then(res=>res.data).then(res=>{
            console.log(res)
            this.tableData=res
          })
        },*/
    getAll() {
      //组织参数，拼接url请求地址
      let param = "?realname=" + this.pagination.realname
      console.log(param)
      //发送异步请求到controller
      this.$axios.get(this.$httpUrls + "/user/" + this.pagination.currentPage + "/" + this.pagination.pageSize + param).then((res) => {
        console.log(res)
        this.pagination.pageSize = res.data.data.size;
        this.pagination.currentPage = res.data.data.current;
        this.pagination.total = res.data.data.total;
        this.tableData = res.data.data.records
      })
    },
    /*    async loadPost(){
          this.$axios.post(this.$httpUrls+"/user/page/?realname="+this.realname+"&?page="+this.page+"&?size="+this.size,{
            page:this.page,
            size:this.size,
            realname:this.realname,
          }).then(resp=>{
            console.log(resp.data.data);
            this.tableData = resp.data.data;
            this.total = resp.data.total;
          })
        },*/
    reset() {
      this.realname = ''
      //组织参数，拼接url请求地址
      /*let param = "?realname="+this.pagination.realname*/
      /*console.log(param)*/
      //发送异步请求到controller
      /*      this.$axios.get(this.$httpUrls+"/user/"+this.pagination.currentPage+"/"+this.pagination.pageSize).then((res)=>{
              console.log(res)
              this.pagination.pageSize = res.data.data.size;
              this.pagination.currentPage = res.data.data.current;
              this.pagination.total = res.data.data.total;
              this.tableData = res.data.data.records
            })*/
    },
    update(row) {
      console.log(row)
      this.form.repair = row.repair
      this.form.id = row.id
      this.form.realname = row.realname
      this.centerDialogVisible = true
    },
    remove(id) {
      console.log(id)
      this.$axios.post(this.$httpUrls + '/user/delete?id=' + id).then(resp => {
        console.log(resp.data.data)
        if (resp.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'warning'
          })
        }
      })
    },
    dosave() {
      this.$axios.post(this.$httpUrls + '/user/AddOrUpdate', this.form).then(resp => {
        console.log(resp.data.data)
        if (resp.data.code == 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'warning'
          })
        }
      }).finally(() => {
        this.getAll()
      })
    },
    save() {
      if (this.form.repair) {
        this.dosave()
      }
    },
    sizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.pagination.pageSize = size;
      this.getAll();
    },
    currentChange(page) {
      console.log(`当前页: ${page}`);
      this.pagination.currentPage = page;
      this.getAll();
    },
  },

  beforeMount() {
    this.loadPost();
    this.reset();
  }
}
</script>

<style scoped>

</style>